<template>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
    import * as echarts from 'echarts';
    import resize from './mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            },
            cData: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                chart: null,
                data: null,
                timer: null
            }
        },
        mounted() {
            this.initChart(this.cData);
        },
        watch: {
            'cData': {
                handler: function(e) {
                    this.initChart(e);
                },
                deep: true,
            }
        },
        beforeDestroy() {
            if (!this.chart) {
                clearInterval(this.timer);
                return
            }
            this.chart.dispose()
            this.chart = null;
            this.data = null;
            clearInterval(this.timer);
        },
        methods: {
            initChart(e) {
                this.chart = echarts.init(document.getElementById(this.id));
                this.data = {
                    series: [{
                        center: ["50%", "50%"],
                        type: 'gauge',
                        startAngle: e.startAngle,
                        endAngle: e.endAngle,
                        min: 0,
                        max: e.max || 2000,
                        splitNumber: 10,
                        itemStyle: {
                            color: e.bgColor || '#58D9F9',
                            shadowColor: 'rgba(0,138,255,0.45)',
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 8
                        },
                        progress: {
                            show: true,
                            roundCap: e.progressRoundCap != false || false,
                            width: e.progressWidth || 12
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisTick: {
                            splitNumber: 0,
                            lineStyle: {
                                width: 1,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            length: e.splitLineLength || 2,
                            lineStyle: {
                                width: 1,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 30,
                            color: '#999',
                            fontSize: 10
                        },
                        title: {
                            offsetCenter: [0, '135%'],
                            fontSize: 16
                        },
                        detail: {
                            backgroundColor: '#fff',
                            borderColor: '#999',
                            borderWidth: 0,
                            width: '60%',
                            lineHeight: 30,
                            height: 30,
                            offsetCenter: [0, '20%'],
                            valueAnimation: true,
                            fontSize: 20,
                            formatter: function(value) {
                                return '{value|' + value.toFixed(0) + '} %';
                            },
                            rich: {
                                value: {
                                    fontSize: 20,
                                    color: 'rgba(44,53,66,0.85)',
                                },
                            }
                        },
                        data: [{
                            value: e.data,
                            name: e.title
                        }]
                    }]
                };
                let _this = this;
                _this.chart.setOption(this.data,true);
                // _this.timer = setInterval(function() {
                //     if (!_this.chart) {
                //         return
                //     }
                //     _this.chart.setOption({}, true);
                //     _this.chart.setOption(_this.data, true);
                // }, 10000);
            }
        }
    }
</script>
